<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>截图</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<body>
<div id="capture" style="padding: 10px; background: #f0f0f0;">
    <h1>Hello, World!</h1>
    <p>This is a screenshot example.</p>
</div>
<button id="screenshot-btn">截图</button>

<script>
    document.getElementById('screenshot-btn').addEventListener('click', () => {
        const element = document.getElementById('capture');
        domtoimage.toPng(element)
            .then(dataUrl => {
                // 创建一个链接并触发下载
                const link = document.createElement('a');
                link.href = dataUrl;
                link.download = 'screenshot.png';
                link.click();
            })
            .catch(error => {
                console.error('截图失败:', error);
            });
    });
</script>
</body>
</html>